<template>
	<!-- <view> -->
	<u-popup :show="showPopup" mode="bottom" border-radius="20" >
		<view class="h-[1000rpx] p-[40rpx]">
			<view class="flex items-center">
				<image class="w-[100rpx] h-[100rpx] rounded" mode="heightFix" :src="logo"></image>
				<text class="text-3xl ml-5 font-bold">{{ title }}</text>
			</view>
			<view class="mt-5 text-muted"> 建议使用您的微信头像和昵称，以便获得更好的体验 </view>
			<view class="mt-[30rpx]">
				<form @submit="handleSubmit" >
					<u-form-item required label="头像" borderBottom labelWidth="120rpx">
						<view class="flex-1">
							<avatar-upload v-model="avatar" :token="token" rounded="10rpx" text_mag="上传头像" is_avatar></avatar-upload>
						</view>
					</u-form-item>
					<u-form-item required label="昵称" borderBottom labelWidth="120rpx">
						<input
							class="flex-1 h-[60rpx]"
							name="nickname"
							type="nickname"
							placeholder="请输入昵称"
						/>
					</u-form-item>
					<view class="mt-[80rpx]">
						<button
							class="bg-primary rounded-full text-white text-lg h-[80rpx] leading-[80rpx]"
							style="background-color: #0057ff"
							hover-class="none"
							form-type="submit"
						>
							确定
						</button>
					</view>

					<view class="flex justify-center mt-[60rpx]">
						<view class="text-muted" @click="showCole">暂不登录</view>
					</view>
				</form>
			</view>
		</view>
	</u-popup>
	<!-- </view> -->
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
const props = defineProps({
	show: {
		type: Boolean
	},
	token:{
		type: String,
		default: ''
	},
	logo: {
		type: String
	},
	title: {
		type: String
	}
})
const emit = defineEmits<{
	(event: 'update:show', show: boolean): void
	(event: 'update', value: any): void
	(event: 'showCole', value: any): void
}>()
const showCole = () => {
	emit('showCole', false)
}
const showPopup = computed({
	get() {
		return props.show
	},
	set(val) {
		emit('update:show', val)
	}
})

const avatar = ref();

const handleSubmit = (e: any) => {
	const { nickname } = e.detail.value
	if (!avatar.value) return uni.$u.toast('请添加头像');
	if (!nickname) return uni.$u.toast('请输入昵称');
	emit('update', {
		avatar: avatar.value == undefined ? '测试' : avatar.value,
		userName: nickname
	})
}
</script>

<style lang="scss" scoped></style>
